<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">

		/*'爱恨原则' love hate*/
		/*没有被访问的a标签的样式*/
		.box ul li.item1 a:link{
			
			color: #666;
		}
		/*访问过后的a标签的样式*/
		.box ul li.item2 a:visited{
			
			color: yellow;
		}
		/*鼠标悬停时a标签的样式*/
		.box ul li.item3 a:hover{
			
			color: green;
		}
		/*鼠标点住的时候a标签的样式*/
		.box ul li.item4 a:active{
			
			color: yellowgreen;
		}
		
		/*选中第一个元素*/
		div ul li:first-child{
			font-size: 20px;
			color: red;
		}
		/*选中最后一个元素*/
		div ul li:last-child{
			font-size: 20px;
			color: yellow;
		}
		
		/*选中当前指定的元素  数值从1开始*/
		div ul li:nth-child(3){
			font-size: 30px;
			color: purple;
		}
		
		/*n表示选中所有 从0开始的  0的时候表示没有选中*/
		div ul li:nth-child(n){
			font-size: 40px;
			color: red;
		}
		
		/*偶数*/
		div ul li:nth-child(2n){
			font-size: 50px;
			color: gold;
		}
		/*奇数*/
		div ul li:nth-child(2n-1){
			font-size: 50px;
			color: yellow;
		}
		/*隔几换色  隔行换色*/
		
		div ul li:nth-child(5n+1){
			font-size: 50px;
			color: red;
		}









	</style>
</head>
<body>

	<div class="box">
		<ul>
			<li class="item1">
				1
				<a href="#">张三</a>
			</li>
			<li class="item2">
				2
				<a href="#">李四</a>
			</li>
			<li class="item3">
				3
				<a href="#">王八</a>
			</li>
			<li class="item4">
				4
				<a href="#">赵六</a>
			</li>
			<li class="item4">
				5
				<a href="#">赵六</a>
			</li>
			<li class="item4">
				6
				<a href="#">赵六</a>
			</li>
			<li class="item4">
				7
				<a href="#">赵六</a>
			</li>
			<li class="item4">
				8
				<a href="#">赵六</a>
			</li>
			<li class="item4">
				9
				<a href="#">赵六</a>
			</li>
			<li class="item4">
				10
				<a href="#">赵六</a>
			</li>
		</ul>
	</div>
	
</body>
</html>